<!DOCTYPE html>
<html>

<head>
	<title>Picard HTML Elements</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="date=no">
	<link rel="stylesheet" type="text/css" href="assets/lcars-ultra-picard.css">
	<script src="assets/jquery-3-7-0.min.js"></script>
	<style type="text/css">
		html {
			scroll-behavior: smooth;
		}
	</style>
</head>

<body id="page--top">
	<div class="wrap-everything">
		<section id="column-1">
			<div class="lcars-frame">
				<div class="frame-col-1">
					<div class="frame-col-1-cell-a"></div>
					<div class="frame-col-1-cell-b"></div>
					<div class="frame-col-1-cell-c"></div>
				</div>
				<div class="frame-col-2"> </div>
				<div class="frame-col-3 display-vertical">
					<div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div>					
				</div>
				<div class="frame-col-4"> </div>
				<div class="frame-col-5">
					<div class="frame-col-5-cell-a"></div>
					<div class="frame-col-5-cell-b"></div>
					<div class="frame-col-5-cell-c"></div>
				</div>
			</div>
			<div class="lcars-frame-after">
				18-1987
			</div>
			<div class="panel-24 first-needle">
				<div class="panel-24-col-a">
					<div class="panel-24-block-1">
						<div class="panel-24-cube cc-1"> </div>
						<div class="panel-24-cube cc-2"> </div>
						<div class="panel-24-cube cc-3"> </div>
					</div>
					<div class="panel-24-block-2">
						<div class="panel-24-block-3">
							<div class="panel-24-block-4 block-4-color-a"> </div>
						</div>
					</div>
					<div class="panel-24-block-5"> </div>
				</div>
				<div class="panel-24-col-b">
					<div class="panel-24-block-6">
						8047
					</div>
					<div class="gauge-wrap">
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							100
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							90
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							80
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							70
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							60
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							50
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							40
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							30
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							20
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							10
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							00
						</div>
					</div>
				</div>
			</div>
			<div class="panel-base">				
			</div>
			<div class="panel-20">
				20-62
			</div>
			<div class="panel-21">
				LV-426
			</div>
			<div class="panel-20">
				20-69
			</div>
			<div class="elbow-continue-1">
				<div class="elbow-continue-2">
					<div class="elbow-continue-3">
						1-987
					</div>
				</div>
			</div>
		</section>

		<section id="column-2">

			<div class="panel-23">
				
				23-1524
			</div>
			<div class="panel-23-after">
				54-2023
			</div>
			<div class="panel-24 second-needle">
				<div class="panel-24-col-a">
					<div class="panel-24-block-1">
						<div class="panel-24-cube cc-4"> </div>
						<div class="panel-24-cube cc-5"> </div>
						<div class="panel-24-cube cc-6"> </div>
					</div>
					<div class="panel-24-block-2">
						<div class="panel-24-block-3">
							<div class="panel-24-block-4 block-4-color-b"> </div>
						</div>
					</div>
					<div class="panel-24-block-5"> </div>
				</div>
				<div class="panel-24-col-b">
					<div class="panel-24-block-6">
						7125
					</div>
					<div class="gauge-wrap">
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							100
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							90
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							80
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							70
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							60
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							50
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							40
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							30
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							20
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							10
						</div>
						<div class="gauge-1"> </div>
						<div class="gauge-2">
							00
						</div>
					</div>
				</div>
			</div>
			<div class="panel-base-2nd-column">	</div>
			<div class="panel-25">
				<div>AA</div>
				<div>-/+</div>
				<div>AA</div>
				<div>=</div>
				<div>AB</div>
				<div>=</div>
				<div>AC</div>
				<div>-/+</div>
				<div>AA-AC</div>
				<div>RND</div>
			</div>
			<div class="panel-26">26-318</div>
			<div class="elbow-close-1">
				<div class="elbow-close-2">
					<div class="elbow-close-3">	</div>
				</div>
			</div>
		</section>
		<section id="column-3">
			<div class="top-wrapper">
				<div class="top-display">
					<div class="top-display-left">
						<nav id="primary-nav">
							<a href="https://www.thelcars.com">TheLCARS.com</a>
							<a href="">BUTTON-02</a>
							<a href="">BUTTON-03</a>
						</nav>
						<div class="chunk"> </div>
						<div class="panel-wrapper">
							<div class="panel-1">04-557</div>
						</div>
					</div>
					<div class="top-display-right">
						<div class="top-display-content">
							<div class="top-arch-1">
								<div class="top-arch-2">
									<div class="top-arch-content">
										<img src="assets/sfcmd.png" class="sfc">
										<div class="lcars-heading">LIBRARY COMPUTER ACCESS/RETRIEVAL SYSTEM</div>
										<div class="lcars-access">
											user authorization code <span class="blink medium-dark-blue">accepted</span>
										</div>
									</div>
									<div class="top-arch-panel-1">
									</div>
									<div class="top-arch-panel-2">
										23<span class="hop">-</span>09										
									</div>
								</div>
							</div>							
						</div>
						<div class="arch-bottom">
							<div class="arch-base"> </div>
						</div>
					</div>
				</div>
				<div class="top-display-bottom">					
					<div class="bar-elbow"></div>
					<div class="bar-1"></div>
					<div class="bar-2"></div>
					<div class="bar-3"></div>
					<div class="bar-4">
						
					</div>
					<div class="bar-5"></div>		
				</div>
			</div> <!-- / top-wrapper -->
			<div class="spacer">
				<div class="space-sidebar"></div>
				<div class="space-1"></div>
				<div class="space-2"></div>
				<div class="space-3"></div>
				<div class="space-4"></div>
			</div>
			<div class="wrap">
				<div class="scroll-top"><a href="#page--top"><span class="hop">screen</span> top</a></div>
				<div class="left-frame">
					<div>
						<div class="panel-3">03<span class="hop">-111968</span></div>
						<nav id="secondary-nav">
							<a href="">BUTTON-04</a>
							<a href="">BUTTON-05</a>
							<a href="">BUTTON-06</a>
						</nav>
						<div class="panel-4">04<span class="hop">-41969</span></div>
						<div class="panel-5">05<span class="hop">-1701D</span></div>
						<div class="panel-6">06<span class="hop">-071984</span></div>
						<div class="panel-7">07<span class="hop">-47148</span></div>
					</div>
					<div>
						<div class="panel-8">08<span class="hop">-091966</span></div>
					</div>
				</div>
				<div class="right-frame">
					<div class="bar-runner">
						<div class="bar-6"></div>
						<div class="bar-7"></div>
						<div class="bar-8"></div>
						<div class="bar-9"></div>
						<div class="bar-10"></div>
					</div>
					<main>
						
						<h1>html elements</h1>
						<p class="uppercase go-big light-orange">Refer to this page's source code when needed, then copy and paste away.</p>

						<div class="buttons jc-space-between">
							<a href="#list">unordered list</a>
							<a href="#horizontal-line">horizontal line</a>
							<a href="#lcars-bar">lcars bar</a>
							<a href="#lcars-text-bar">lcars text bar</a>
							<a href="#blockquote">blockquote</a>
							<a href="#blinkies">blinkies</a>
							<a href="#buttons">buttons</a>
							<a href="#custom-classes">text formating</a>
							<a href="#text-color">change text color</a>
						</div>

						<h2 id="list" class="big-sky">Unordered List</h2>
						<p class="flush"><span class="light-orange">NOTE:</span> The bullets will all be one color - the default color - unless given a special class name.</p>

						<ul class="lcars-list">
							<li class="bullet-dark-gray">Dark Gray</li>
							<li>Primary Gray (default bullet color)</li>
							<li class="bullet-medium-dark-gray">Medium Gray</li>
							<li class="bullet-light-gray">Light Gray</li>
							<li class="bullet-ghost-gray">Ghost Gray</li>
							<li class="bullet-starlight">Starlight</li>
							<li class="bullet-cyan">Cyan</li>
							<li class="bullet-orange">Orange</li>
							<li class="bullet-light-orange">Light Orange</li>
							<li class="bullet-pale-orange">Pale Orange</li>
							<li class="bullet-blue">Blue</li>
							<li class="bullet-medium-dark-blue">Medium Dark Blue</li>
							<li class="bullet-dark-blue">Dark Blue</li>
							<li class="bullet-green">Green</li>
							<li class="bullet-black-cherry">Black Cherry</li>
						</ul>

						<h2 id="horizontal-line" class="big-sky">Horizontal Line</h2>

						<hr>

						<h2 id="lcars-bar" class="big-sky">LCARS Bar</h2>
						
						<div class="lcars-bar">	</div>

						<h2 id="lcars-text-bar" class="big-sky">LCARS Text Bar</h2>

						<div class="lcars-text-bar">
							<span>heading</span>
						</div>

						<h3>You can also align text to the right:</h3>

						<div class="lcars-text-bar the-end">
							<span>heading</span>
						</div>

						<h2 id="blockquote" class="big-sky">Blockquote</h2>

						<blockquote>"I have been and always shall be, your friend."</blockquote>

						<h2 id="blinkies" class="big-sky">Blinkies</h2>
						<p class="flush">Note that text color is a separate class. Remember, you can include more than one class to an element.</p>
						<p class="indent">Monday blinks slow: <span class="blink-slow medium-dark-blue">Monday</p>
						<p class="indent">Wednesday blinks average speed: <span class="blink green">Wednesday</p>
						<p class="indent">Saturday blinks fast: <span class="blink-fast orange">Saturday</p>

						<h2 id="buttons" class="big-sky">Buttons</h2>
						<p class="flush">Use the following class selectors (shown in green) in the parent *buttons* DIV to position a button or group of buttons. Note that buttons will wrap at smaller viewport sizes. <span class="light-orange">Positioning classes work in all themes.</span></p>

						<h3>center one or more buttons</h3>
						<p class="flush"><code>jc-center</code><br>
						Note: *jc* stands for justify content.</p>

						<div class="buttons jc-center">
							<a href="">BA-001</a>
							<a href="">BB-002</a>
						</div>
						
						<h3>Buttons that Align to the Right</h3>

						<p class="flush"><code>jc-flex-end</code><br>
						Note: Buttons align to the left by default.</p>

						<div class="buttons jc-flex-end">
							<a href="">BA-001</a>
							<a href="">BB-002</a>
						</div>

						<h3>a group of buttons that are spaced evenly</h3>
						<p class="flush"><code>jc-space-evenly</code> <br>Buttons are distributed so that the spacing between any two adjacent alignment buttons, before the first alignment button, and after the last alignment button is the same.</p>

						<div class="buttons jc-space-evenly">
							<a href="">BA-001</a>
							<a href="">BB-002</a>
							<a href="">BB-003</a>							
						</div>

						<h3>a group of buttons that fill a line</h3>
						<p class="flush"><code>jc-space-between</code> <br>Buttons are evenly distributed in the line; first button is on the start of the line, last button on the end of the line.</p>

						<div class="buttons jc-space-between">
							<a href="">BA-001</a>
							<a href="">BB-002</a>
							<a href="">BB-003</a>								
						</div>

						<h3>a group of equally spaced buttons</h3>
						<p class="flush"><code>jc-space-around</code> <br>Buttons are evenly distributed in the line with equal space around them.</p>

						<div class="buttons jc-space-around">
							<a href="">BA-001</a>
							<a href="">BB-002</a>
							<a href="">BB-003</a>								
						</div>

						<h3>change a button's color</h3>
						<p class="flush"><span class="light-orange">Note:</span> this also works on the buttons in the sidebar.</p>

						<div class="buttons">
							<a href="" class="bc-blue">BA-001</a>
							<a href="" class="bc-lightest-gray">BB-002</a>
							<a href="" class="bc-orange">BB-003</a>
							<a href="" class="bc-pale-orange">BB-004</a>								
						</div>

						<h2 id="custom-classes" class="big-sky">Text Formatting &#149; Custom Class Selectors</h2>

						<p><code>flush</code><br>
						Basically this removes space between a header element and a paragraph. Specifically, this sets the top margin of an element to a negative value so that the line is flush against the previous element.</p> 
						<p><code>nomar</code><br>
						Resets an element's margins to 0.</p>
						<p><code>go-right</code><br>
						Aligns text to the right.</p>
						<p class="go-right black-cherry">Look at me, I'm way over here to the right of the page!</p>
						<p><code>go-left</code><br>
						Text aligns to the left by default, with some exceptions. For instance, the main page heading (<code>&#60;h1&#62;</code>) aligns right. But maybe you want it to align left instead. So rather than going in to CSS and making changes there, you can just add this class to the <code>&#60;h1&#62;</code> tag.</p>
						<p><code>go-center</code><br>
						Centers text in an element.</p>
						<p class="go-center black-cherry">Look at me, I'm centered!</p>
						<p><code>go-big</code><br>
						<span class="go-big black-cherry">Makes text in an element a little bigger than normal</span></p>
						<p><code>uppercase</code><br>
						<span class="uppercase black-cherry">Transforms text to all uppercase letters</span></p>
						<p><code>strike</code><br>
						Strikethrough: <span class="strike black-cherry">I love Mondays</span></p>
						<p><code>now</code><br>
						This gives the whitespace property a value of nowrap. I use this when I don't want a string of words to break at the end of a line. This can happen when the veiwport shrinks. Take <strong>Star Trek</strong>, for example, which are two words that look better next to each other. If you're like me, you wouldn't like <strong>Star</strong> to be at the end of one line and <strong>Trek</strong> at the start of the next line.<br>
						<div style="margin-bottom: 10px; width: 240px; border: 2px solid var(--primary-gray); padding: 5px 10px;">
							I grew up watching Star<br>
							Trek.
						</div>
						Here is the fix:<br>
						<code>&#60;span class="now"&#62;Star Trek&#60;/span&#62;</code><br>
						<div style="margin-top: 10px; width: 240px; border: 2px solid var(--primary-gray); padding: 5px 10px;">
							I grew up watching <span class="now">Star Trek</span>.
						</div></p>
						<p><code>big-sky</code><br>
							This almost quadruples the top margin of an element. Use case: this page - I use this on the <code>&#60;h2&#62;</code> heading tags to add more space between topics.</p> 

						<h2 id="text-color" class="big-sky">change text color</h2>
						<p>Simply add a color's class name to change text to that color.</p>
						<ul class="lcars-list">
							<li class="dark-gray">dark-gray</li>
							<li class="medium-dark-gray">medium-dark-gray</li>
							<li class="primary-gray">primary-gray</li>
							<li class="light-gray">light-gray</li>
							<li class="ghost-gray">ghost-gray</li>
							<li class="starlight">starlight</li>
							<li class="cyan">cyan</li>
							<li class="orange">orange</li>
							<li class="light-orange">light-orange</li>
							<li class="pale-orange">pale-orange</li>
							<li class="blue">blue</li>
							<li class="medium-dark-blue">medium-dark-blue</li>
							<li class="dark-blue">dark-blue</li>
							<li class="green">green</li>
							<li class="black-cherry">black-cherry</li>
						</ul>

						<footer>
							<div class="footer-inside">
								<div class="footer-text">
									<p>Copyright &#169; 2023 <a href="https://www.thelcars.com">www.TheLCARS.com</a></p>
								</div>
							</div>
							<div class="footer-panel"> <span class="hop">22</span>47 </div>
						</footer>
					</main>
				</div>
			</div>
		</section>
	</div>
	<script type="text/javascript" src="assets/lcars.js"></script>
</body>

</html>